body{
    font-family: "Microsoft YaHei"
    width: 100%
    margin: 0 auto
    padding: 0
    background-color: #f1f2f3
	min-width: 1888px
}
//图标引用
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    color: black;
    margin: 0px 3px
}
.search-login{
    position: fixed
}
.course{
    width: 1200px
    margin: 0 auto
    padding: 0
}
//right

.page-content-right{
    // border: 1px solid #d2d2d2
    float: right 
    width: 375px
    height: auto
    margin: 0px 5px 5px 10px
    background-color: #fff
    border-radius: 5px
    & .right-content{
        height: auto
        & .outborder{
            // background-color: #f1f2f3
            height: auto
            width: 345px
            float: right
            margin: 0 15px 20px 15px
            border-radius 10px
            // border: 1px solid #d2d2d2
        }
    }
}
.right-title{
    margin: 15px 15px 15px 20px
    font-size: 20px
}
//帮助中心
.right-main-help{
     width: 100%
     padding 20px 15px 30px 15px
}
.right-main-txt-help{
    list-style: none
    padding: 0px 0px 10px 0px
    height: 130px
    border: none
    & li a{
            float: left
            color lighten(#111,30%)
            margin: 0 10px 10px 0
            padding: 5px 10px
            text-decoration none
            border-radius 3px
            // border: 1px solid #d2d2d2
             &:hover{
                color #fff
                background-color #039ffc
                // border: 1px solid #039ffc
             }
        } 
}
//热门问题组件
.right-main{
     width: 100%
     padding: 10px 20px
}
.right-main-content{
    margin: 0px
    padding: 0px
    & .right-main-txt{
        list-style: none
        padding-left: 0px
        margin: 0px
        border: 0px
        & li{
            position: relative
            margin: 0px
            width: 100%
            height: auto
            & a{
                font-size: 14px
                width: 100%
                height: 26px
                color: #309ffc
                line-height: 26px
                text-decoration: none
                &:hover{
                    color: lighten(#309ffc,20%)
                }
            }
        }
    }
}



//左列表
.page-content-left{
    float: left 
    width: 790px
    background-color: #fff
    border-radius: 5px
    height: auto
    & .left-content{
        height: auto
        margin: 20px 50px 20px 30px 
        border-radius: 10px
    }
}
.daodu{
    padding-left 30px
    & h3{
        font-size: 26px
        color: black
        margin: 15px 0px 5px 10px 
    }
}
.left-content-main{//左边内容下元素构建（移动端重构：开始；阅读全文按钮结束）
    width: 100%
    height: auto
    padding: 10px 10px 10px 10px
    margin: 10px 0 25px 0
    & h2{//内容元素1--环形UI
        height: 34px
        border-left: solid 5px #309ffc
        padding-left: 15px
        margin: 15px 0
        & a{
            text-decoration: none
            color: #309ffc
            &:hover{
                color: lighten(#309ffc,20%)
            }
        }
    }
}

.main-note{//小字体（作者开始）
    width: 100%
    height: 25px
    padding-bottom: 1px
    border-bottom: 1px dotted lightgrey
    margin-bottom: 10px
    & .main-note-left{//左边-作者
        width: 35%
        height: 17px
        font-size: 12px
        color: lighten(black,50%)
        float: left
        text-align: left
    }
    & .main-note-right{//右边-移动端重构系列
        width: 65%
        height: 18px
        font-size: 12px
        color: lighten(black,50%)
        float: right
        text-align: right
        & a{
            padding: 0 15px
            text-decoration: none
            color: lighten(black,50%)
            &:hover{
                color: lighten(#309ffc,20%)
            }
        }
    }
}


.main-content{//内容元素3(CSS制作圆形进度条)
    width: 100%
    height: auto
    font-size: 18px
    line-height: 30px
    overflow: hidden
    & .img{
        padding: 20px 0px 0
        width: 200px
        float: left 
        & img{
            width: 200px
            height: 140px
        }
    }
    & .a{
        padding: 20px 5px 0
        width: 480px
        height: 200px
        float: right
        & a{
            color: lighten(black,10%)
            text-decoration: none
            font-size: 14px
            overflow : hidden
            text-overflow: ellipsis
            display: -webkit-box
            -webkit-line-clamp: 3
            -webkit-box-orient: vertical
        }
    }
}
.instruction{
    width: 150px
    margin: 20px 0px 0px 0px 
    & i{
        color: #666666
        font-size: 12px
    }
}
//阅读全文按钮

.main-btn{
    position: relative
    top: -30px
    right: 0px
    float: right
}
.main-btn button{
    padding: 0px 10px 
    font-size: 18px
    background-color: lighten(#309ffc,5%)
    border-radius: 5px
    border: 0px
    &:hover{
        background-color lighten(#309ffc,20%)
        & a{
            color: #fff
            text-decoration: none
        }
    }
}


//详情页面-左列表
.left-xiangqing{
    float: left 
    width: 790px
    background-color: #fff
    // border: 1px solid #d2d2d2
    border-radius: 5px
    height: auto
}
.left-main{
    // border: 1px solid #d2d2d2
    margin: 20px 50px 20px 30px
    // background-color: #f1f2f3
    border-radius: 10px
    height: auto
}
.left-main-title{
    margin: 20px 20px 
    padding: 0px 20px 40px
    border-bottom 2px dotted #999
    & h2{
        margin: 30px 0px 
        font-size: 28px
    }
    & li{
        list-style: none
        float: left
        margin: 0px 10px 
        & span:hover{
            color: lighten(red,50%)
            cursor: default
        }
    }
    & .left-fx{
        float: right
        
        & span{
            position: relative
            top: -6px
            left: 0px
            font-size: 14px 
            margin: 0px 5px 10px 0px
            padding-bottom: 5px 
        }
    }
}
.icon-fenxiang {
    width: 2em
    height: 2em
    vertical-align: -0.15em
    fill: currentColor
    overflow: hidden
    opacity: 0.5
    cursor: pointer
    margin: 0px 5px
    &:hover{
        opacity: 0.9
    }
}

.left-main-article{
    font-size: 14px
    padding: 15px 20px 
    & img{
        max-width: 500px
        max-height: 500px
    }
}
.left-main-change{
    float: left
    width: 100%
    padding: 30px 20px
    & a{
        text-decoration: none
        color: #309ffc
        &:hover{
            color: lighten(#309ffc,20%)
        }
    }
}
.left-main-bottom{
    padding-bottom: 40px 
    text-align: center
    & span{
        padding: 10px 40px
        text-align: center
        border-radius: 5px
        color: #999
        border: 1px solid #d2d2d2
        cursor pointer
        &:hover{
            background-color #4ab7ed
            color: #fff
            & .icon-dianzan{
                font-style: normal
                color: #fff
            }
        }
    }
}
.icon-dianzan {
    width: 1.5em
    height: 1.5em
    font-size: 12px
    vertical-align: -0.15em
    fill: currentColor
    overflow: hidden
    color: lighten(black,50%)
    cursor: pointer
}
